<template>
	<view class="page cp" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="datetop" @tap="toSelectSingleDate">
			<view class="dp_date">
				<image src="https://i.ringzle.com/file/20240221/320a4fe9150d46e39f78f13d25a273fb.png"></image>
				<text>{{startYr}}</text>
				<text>{{item.goWeek}}</text>
			</view>
			<view class="dp_num">{{dateNum}}天</view>
			<view class="dp_date">
				<image src="@/static/index/steamerTicket/icon_return.jpg"></image>
				<text>{{endYr}}</text>
				<text>{{item.backWeek}}</text>
			</view>
		</view>
		<view class="content">
			<view class="cbox">
				<view class="box box_blue">
					<view class="cb_top cb_blue">
						<view class="ct_text">去程</view>
						<text>{{startDate}}</text>
					</view>
					<view class="cb_cards" :class="goList.length==0?'content_empty':''">
						<!-- <view class="c_linetip" v-if="goList.length>0&&isGoTy">
							由于天气原因{{startDate}}当天班次停运，看看其他日期吧！请您实时关注网上航班的变动情况！
						</view> -->
						<view class="cbc_item" v-for="(item,index) in goList" :key="index"
							@tap="selectGoItem(item,index)"
							:class="((hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount)==0||item.lineState!=0)?'active':(item.isSelect?'selected_go':'')">
							<view class="cc_content">
								<view class="time">
									<block v-if="item.busStartTime">{{item.busStartTime}}</block>
									<block v-else>{{item.sailTime||''}}</block>
									<view class="cclp" v-if="item.busStartTime" @tap.stop="showInfo(item)">
										<text>车船联票</text>
										<image v-if="item.priceAndTotalCount.totalCount!=0"
											src="https://i.ringzle.com/file/20240318/60518164c4a140fc857972fca377151b.png"></image>
										<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png"></image>
									</view>
								</view>
								<view class="middle">
									<view class="top">
										<image src="@/static/index/steamerTicket/icon_line.jpg" mode=""></image>
										<view class="texts">
											<text>{{item.startPortName}}</text>
											<text>{{item.endPortName}}</text>
										</view>
									</view>
									<view class="cbottom">{{item.clxm}}<span
											v-if="item.timeMemosStr">{{item.timeMemosStr}}</span></view>
								</view>
								<view class="right" v-if="item.lineState==0">
									<view class="price">
										￥<span>{{hasLocal?item.priceAndTotalCount.localMinPrice:item.priceAndTotalCount.minPrice}}</span>
									</view>
									<text
										v-if="hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount">余票{{hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount}}张</text>
									<text v-else>售罄</text>
								</view>
								<view class="right_state" v-else>
									{{item.lineStateName||'未知'}}
								</view>
							</view>
							<!-- <image class="ci_bg" v-if="item.lineState!=0" src="https://i.ringzle.com/file/20231120/1597892077e14be3adbdff8fd6b11a58.png"></image> -->
						</view>
						<view class="c_empty" v-if="goList.length==0">
							<image src="https://i.ringzle.com/file/20240221/924fd72aa4e049c5a7bb5ad65031e37a.png">
							</image>
							<view class="ce_tip">暂无航班班次</view>
						</view>
					</view>
				</view>
				<view class="box box_red">
					<view class="cb_top cb_red">
						<view class="ct_text">返程</view>
						<text>{{endDate}}</text>
					</view>
					<view class="cb_cards" :class="backList.length==0?'content_empty':''">
						<!-- <view class="c_linetip" v-if="backList.length>0&&isBackTy">
							由于天气原因{{endDate}}当天班次停运，看看其他日期吧！请您实时关注网上航班的变动情况！
						</view> -->
						<view class="cbc_item" v-for="(item,index) in backList" :key="index"
							@tap="selectBackItem(item,index)"
							:class="((hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount)==0||item.lineState!=0)?'active':(item.isSelect?'selected_back':'')">
							<view class="cc_content">
								<view class="time">
									{{item.sailTime}}
								</view>
								<view class="middle">
									<view class="top">
										<image src="@/static/index/steamerTicket/icon_line.jpg" mode=""></image>
										<view class="texts">
											<text>{{item.startPortName}}</text>
											<text>{{item.endPortName}}</text>
										</view>
									</view>
									<view class="cbottom">{{item.clxm}}<span
											v-if="item.timeMemosStr">{{item.timeMemosStr}}</span></view>
								</view>
								<view class="right" v-if="item.lineState==0">
									<view class="price">
										￥<span>{{hasLocal?item.priceAndTotalCount.localMinPrice:item.priceAndTotalCount.minPrice}}</span>
									</view>
									<text
										v-if="hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount">余票{{hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount}}张</text>
									<text v-else>售罄</text>
								</view>
								<view class="right_state" v-else>
									{{item.lineStateName||'未知'}}
								</view>
							</view>
							<!-- <image class="ci_bg" v-if="item.lineState!=0" src="https://i.ringzle.com/file/20231120/1597892077e14be3adbdff8fd6b11a58.png"></image> -->
						</view>
						<view class="c_empty" v-if="backList.length==0">
							<image src="https://i.ringzle.com/file/20240221/924fd72aa4e049c5a7bb5ad65031e37a.png">
							</image>
							<view class="ce_tip">暂无航班班次</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="toNext">下一步</view>
		</view>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		<view class="v-calendar">
			<u-calendar title="选择日期" :maxDate="maxDate" :defaultDate="defaultDate" confirmDisabledText="确定"
				:formatter="formatter" :show="singleShow" :closeOnClickOverlay="true" mode="range"
				@confirm="singleConfirm" @close="closeDate" ref="calendar">
			</u-calendar>
		</view>
		<view class="cclp_up">
			<u-popup :show="cclpShow" @close="cclpShow=false">
				<view class="cclp_info">
					<view class="ci_title">
						<text>车船联票</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="cclpShow=false"></image>
					</view>
					<view class="ci_tip">路线：汽车大巴+客船</view>
					<view class="ci_box">
						<view class="cib_item">{{cclpInfo.busStartTime}}开车 {{cclpInfo.startPortName}}
							<image src="https://i.ringzle.com/file/20240307/dc715e8e47ce49649067a9554c0c92e1.png"></image>
						</view>
						<view class="cib_item">{{cclpInfo.sailTime}}开船 {{cclpInfo.embarkPortName}}
							<image src="https://i.ringzle.com/file/20240307/ab80e33c11da46dbacd6361a0e537de2.png"></image>
							<span>到达港口的时间因路况、车况的不同会有变动，仅供您参考</span>
						</view>
						<view class="cib_item">{{cclpInfo.endPortName}}
							<image src="https://i.ringzle.com/file/20240307/a9cf3df09f9a4a1f93e4dbe432089e25.png"></image>
						</view>
					</view>
					<view class="ci_btn" @tap="cclpShow=false">我知道了</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	var maxQueryDayNum = '';
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		name: 'arriveDepart',
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				singleShow: false,
				maxDate: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				item: null,
				dateNum: 5,
				startYr: '',
				endYr: '',
				startDate: '',
				endDate: '',
				goList: [],
				backList: [],
				hasLocal: false, //是否包含本地人
				cic: this.$cic,
				selectGoInfo: null,
				selectBackInfo: null,
				title: '',
				isGoTy: false,
				isBackTy: false,
				carship: false,
				cclpShow:false,
				cclpInfo:null
			}
		},
		onLoad(option) {
			this.$refs.calendar.setFormatter(this.formatter);
			if (option.item) {
				this.item = JSON.parse(option.item);
				this.startYr = new Date(this.item.startDate).Format('MM月dd日');
				this.endYr = new Date(this.item.endDate).Format('MM月dd日');
				this.startDate = new Date(this.item.startDate).Format('yyyy年MM月dd日');
				this.endDate = new Date(this.item.endDate).Format('yyyy年MM月dd日');
				this.dateNum = Math.floor((new Date(this.item.endDate).getTime() - new Date(this.item.startDate)
					.getTime()) / (24 * 60 * 60 * 1000));
				this.title = this.item.from + ' - ' + this.item.to;
				if (this.item.from.indexOf('上海') > -1) this.carship = true;
				this.getMaxDate();
				this.getGoList();
				this.getBackList();
				this.getIsLocal();
			}
		},
		onUnload() {
			uni.$off('toSendData');
		},
		methods: {
			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							maxQueryDayNum = res.data.data.list[0].wysts;
							this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+maxQueryDayNum))).Format('yyyy-MM-dd');
						}
					} else this.$showModal(res.data.msg);
				})
			},
			showInfo(item){
				this.cclpShow = true;
				this.cclpInfo = item;
			},
			toSelectSingleDate() {
				this.singleShow = true;
			},
			singleConfirm(e) {
				this.singleShow = false;
				this.item.startDate = e[0];
				this.item.endDate = e[e.length - 1];
				this.startYr = new Date(this.item.startDate).Format('MM月dd日');
				this.endYr = new Date(this.item.endDate).Format('MM月dd日');
				this.startDate = new Date(this.item.startDate).Format('yyyy年MM月dd日');
				this.endDate = new Date(this.item.endDate).Format('yyyy年MM月dd日');
				this.dateNum = Math.floor((new Date(this.item.endDate).getTime() - new Date(this.item.startDate)
					.getTime()) / (24 * 60 * 60 * 1000));
				this.getGoList();
				this.getBackList();
				this.getIsLocal();
			},
			closeDate() {
				this.singleShow = false;
			},
			formatter(day) {
				if (uni.getStorageSync('maxQueryDayNum')) {
					for (let i = 0; i <= +uni.getStorageSync('maxQueryDayNum'); i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			getGoList() {
				this.$api.get('/travel/isshipport/pageLineAll', {
					startPortNo: this.item.startPortNo,
					endPortNo: this.item.endPortNo,
					startDate: this.item.startDate,
					pzlx: this.item.pzlx
				}).then(res => {
					if (res.data.code === 0) {
						this.goList = res.data.data || [];
						this.goList.forEach(l => {
							if (l.lineState != 0) return this.isGoTy = true;
						});
					} else this.$showModal(res.data.msg)
				})
			},
			getBackList() {
				this.$api.get('/travel/isshipport/pageLineAll', {
					startPortNo: this.item.endPortNo,
					endPortNo: this.item.startPortNo,
					startDate: this.item.endDate,
					pzlx: this.item.pzlx
				}).then(res => {
					if (res.data.code === 0) {
						this.backList = res.data.data || [];
						this.backList.forEach(l => {
							if (l.lineState != 0) return this.isBackTy = true;
						});
					} else this.$showModal(res.data.msg)
				})
			},
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			loginSuccess() {
				this.getIsLocal();
			},
			selectGoItem(item, index) {
				if (item.lineState != 0) return;
				this.selectGoInfo = item;
				this.goList.forEach((g, i) => {
					this.$set(this.goList[i], 'isSelect', i === index ? true : false);
				})
			},
			selectBackItem(item, index) {
				if (item.lineState != 0) return;
				this.selectBackInfo = item;
				this.backList.forEach((g, i) => {
					this.$set(this.backList[i], 'isSelect', i === index ? true : false);
				})
			},
			toNext() {
				if (!this.selectGoInfo) return this.$showToast('请选择去程船票');
				if (!this.selectBackInfo) return this.$showToast('请选择返程船票');
				uni.$once('toSendData', () => {
					uni.$emit('sendData', {
						selectGoInfo: this.selectGoInfo,
						selectBackInfo: this.selectBackInfo
					})
				})
				let url = '/pagesIndex/steamerTicket/arriveDepartConfirm';
				if (this.item.pzlx == 1) url = '/pagesIndex/steamerTicket/confirmBookingBackCar?type=2' //2 车辆及随车人员
				uni.navigateTo({
					url
				});
			}
		}
	}
</script>
<style>
	.cp .u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>
<style scoped lang="less">
	::v-deep .cclp_up{
		.u-popup__content{
			 border-radius: 24rpx 24rpx 0 0;
		}
	}
	.cclp_info{
		 width: 100%;
		 padding: 40rpx 23rpx 64rpx;
		 box-sizing: border-box;
		 border-radius: 24rpx 24rpx 0 0;
		 .ci_title{
			 width: 100%;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 position: relative;
			 text{
				 font-family: PingFang-SC, PingFang-SC;
				 font-weight: bold;
				 font-size: 36rpx;
				 color: #111111;
				 line-height: 36rpx;
			 }
			 image{
				 width: 36rpx;
				 height: 36rpx;
				 position: absolute;
				 top:50%;
				 margin-top: -18rpx;
				 right: 13rpx;
			 }
		 }
		 .ci_tip{
			 margin-top: 26rpx;
			 padding-left: 9rpx;
			 font-family: PingFangSC, PingFang SC;
			 font-weight: 400;
			 font-size: 28rpx;
			 color: #333333;
			 line-height: 40rpx;
		 }
		 .ci_box{
			 width: 100%;
			 margin-top: 23rpx;
			 position: relative;
			 padding-left: 87rpx;
			 box-sizing: border-box;
			 &:before{
				 content: '';
				 width: 22rpx;
				 height: 88%;
				 background: #188FFE;
				 position: absolute;
				 left: 25rpx;
				 top: 6%;
			 }
			 .cib_item{
				 padding: 21rpx 0;
				 font-family: PingFang-SC, PingFang-SC;
				 font-weight: bold;
				 font-size: 30rpx;
				 color: #333333;
				 margin-top: 26rpx;
				 position: relative;
				 &:first-child{
					 margin-top: 0;
				 }
				 image{
					 width: 72rpx;
					 height: 72rpx;
					 position: absolute;
					 left: -88rpx;
					 top: 50%;
					 margin-top: -36rpx;
					 z-index: 2;
				 }
				 span{
					 position: absolute;
					 top: 60rpx;
					 left: 0;
					 font-family: PingFangSC, PingFang SC;
					 font-weight: 400;
					 font-size: 24rpx;
					 color: #808080;
					 line-height: 33rpx;
				 }
			 }
		 }
		 .ci_btn{
			 margin-top: 37rpx;
			 width: 100%;
			 height: 88rpx;
			 background: #007A69;
			 border-radius: 44rpx;
			 line-height: 88rpx;
			 text-align: center;
			 font-family: PingFang-SC, PingFang-SC;
			 font-weight: bold;
			 font-size: 32rpx;
			 color: #FFFFFF;
		 }
	}
	
	.page {
		background: #F5F8FA;
		box-sizing: border-box;

		.datetop {
			background: #fff;
			padding: 21rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.dp_date {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;

					&:last-child {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-left: 10rpx;
						margin-top: 8rpx;
					}
				}
			}

			.dp_num {
				width: 90rpx;
				height: 48rpx;
				border-radius: 24rpx;
				border: 1rpx solid #CCCCCC;
				line-height: 48rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				position: absolute;
				left: 50%;
				margin-left: -45rpx;
			}
		}

		.content {
			height: calc(100% - 89rpx);
			padding: 20rpx 24rpx;
			overflow: auto;
			box-sizing: border-box;

			.cbox {
				width: 1256rpx;
				// width: 924rpx;
				height: 100%;
				display: flex;
				overflow: auto;

				.box {
					width: 600rpx;
					// width: 434rpx;
					border-radius: 16rpx;
					margin-left: 24rpx;
					background: #fff;

					&:first-child {
						margin-left: 0;
					}

					&.box_blue {
						border: 2rpx solid #007A69;
					}

					&.box_red {
						border: 2rpx solid #35A091;
					}

					.cb_top {
						padding: 19rpx 20rpx 19rpx 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top-left-radius: 16rpx;
						border-top-right-radius: 16rpx;

						.ct_text {
							width: 81rpx;
							height: 42rpx;
							border-radius: 21rpx;
							border: 1rpx solid #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						&.cb_blue {
							background: #007A69;
						}

						&.cb_red {
							background: #35A091;
						}
					}

					.cb_cards {
						height: calc(100% - 90rpx);
						padding-bottom: 38rpx;
						box-sizing: border-box;
						overflow-y: auto;

						.cbc_item {
							background: #FFFFFF;
							box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
							padding: 32rpx 24rpx;
							position: relative;

							.cc_content {
								display: flex;

								.time {
									font-size: 40rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
									line-height: 56rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									.cclp {
										// width: 124rpx;
										height: 32rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										background: rgba(0, 122, 105, 0.09);
										border-radius: 4rpx;

										text {
											font-size: 20rpx;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #007A69;
										}

										image {
											width: 10rpx;
											height: 12.5rpx;
											margin-left: 11rpx;
										}
									}
								}

								.middle {
									width: calc(100% - 260rpx);
									padding-left: 30rpx;
									box-sizing: border-box;

									.top {
										display: flex;
										align-items: center;

										&>image {
											width: 8rpx;
											height: 68rpx;
										}

										.texts {
											display: flex;
											flex-direction: column;
											padding-left: 16rpx;

											text {
												font-size: 30rpx;
												font-family: PingFang-SC-Bold, PingFang-SC;
												font-weight: bold;
												color: #333333;

												&:last-child {
													margin-top: 25rpx;
												}
											}
										}
									}

									.cbottom {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										margin-top: 20rpx;
										padding-left: 24rpx;

										span {
											font-size: 24rpx;
											font-family: PingFangSC, PingFang SC;
											font-weight: 400;
											color: #999999;
											margin-left: 10rpx;
											padding-left: 10rpx;
											position: relative;

											&::before {
												content: '';
												width: 1rpx;
												height: 20rpx;
												background: #CCCCCC;
												position: absolute;
												left: 0;
												top: 50%;
												margin-top: -10rpx;
											}
										}
									}
								}

								.right {
									width: 150rpx;
									display: flex;
									flex-direction: column;
									text-align: right;
									position: relative;

									.price {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #FF4141;

										span {
											font-size: 40rpx;
											font-weight: bold;
										}
									}

									text {
										font-size: 24rpx;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										margin-top: 10rpx;
									}
								}

								.right_state {
									width: 150rpx;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									font-size: 40rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #AAAAAA;
								}
							}

							&.active {

								.time,
								.price,
								.cbottom,
								text,
								span {
									color: #CCCCCC !important;
								}

								.cclp {
									background: #F6F6F6;
								}
							}

							&.selected_go {
								background: #EDFBF9;
								box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
								border: 2rpx solid #007A69;
								padding: 30rpx 22rpx;
							}

							&.selected_back {
								background: #EDFBF9;
								box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
								border: 2rpx solid #007A69;
								padding: 30rpx 22rpx;
							}

							.ci_bg {
								width: 160rpx;
								height: 106rpx;
								position: absolute;
								top: 50%;
								margin-top: -53rpx;
								right: 156rpx;
								z-index: 9;
							}
						}

						.c_linetip {
							width: 100%;
							background: #FFF5EB;
							padding: 10rpx 24rpx;
							box-sizing: border-box;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FF7D01;
							line-height: 30rpx;
							margin-top: 0;
						}

						&.content_empty {
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.c_empty {
							width: calc(100% - 32rpx);
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 0;

							image {
								width: 204rpx;
								height: 130rpx;
							}

							.ce_tip {
								font-size: 32rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #333333;
								margin-top: 48rpx;
							}
						}
					}
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background: #fff;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 99;

			.btn {
				width: 100%;
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin-top: 16rpx;
			}
		}

		/deep/.u-popup__content,
		.p_box {
			border-radius: 32rpx 32rpx 0 0;
		}

		/deep/.v-calendar {
			.u-icon__icon {
				font-size: 28rpx !important;
			}
		}
	}
</style>
<style lang="scss" scoped>
	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>